<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d1{
				height: 50px;
				width: 150px;
				border: 1px solid black;
			}
			#d2{
				height: 300px;
				width: 300px;
				background-color: #999999; 
			}
			#d4{
				height: 100px;
				width: 100px;
				background-color: #000000;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<button id="b1" type="button" onclick="b1click()">确认</button>
			<button id="b2" type="submit" onclick="b2click()">提交</button>
			<button id="b3" type="reset" onclick="b3click()">重置</button>
		</div>
		<br />
		<div id="d2" onmouseenter="enter()" onmouseleave="leave()" onmousemove="move()">
			
		</div>
		<br />
		<div id="d3">
			<form>
				<table>
					<tr>
						<td>用户名：</td><td><input type="text" id="user" onfocus="userfocus()" onblur="userblur()" /></td>
					</tr>
					<tr>
						<td>密码：</td><td><input type="password" id="pwd" onfocus="pwdfocus()" onblur="pwdblur()" /></td>
					</tr>
					<tr>
						<td><button id="b4" type="button" onclick="submit1()">提交</button></td>
						<td><button id="b5" type="button">重置</button></td>
					</tr>
				</table>
			</form>
		</div>
		<div id="d4" onmouseenter="addListener()" onmouseleave="removeListener()">
			
		</div>
	</body>
	
	<script type="text/javascript">
		// 1.按钮和DIV的单击事件（三种绑定方式）
		function b1click(){
			console.log('确认')
		}
		function bclick(){
			b2click();
			b3click();
		}
			function b2click(){
				console.log('提交')
			}
			function b3click(){
				console.log('重置')
			}
		// 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		function enter(){
			document.getElementById("d2").style.backgroundColor= '#0000ff';
			console.log('您已进入div2范围')
		}
		function leave(){
			document.getElementById("d2").style.backgroundColor= '#999999';
			console.log('您已离开div2范围')
		}
		function move(){
			console.log('您已触摸div2范围')
		}
		// 3.登入页面
		// 用户名输入框，密码输入框，提交按钮
		// 任务
		// 3.1  用户名框获取焦点事件，控制台输出：用户在输入名称
		// 3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		// 3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		// 3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		// 3.5  点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		//      密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		function userfocus(){
			console.log('用户在输入名称')
		}
		function userblur(){
			console.log('用户名输入完成')
		}
		function pwdfocus(){
			console.log('用户在输入密码')
		}
		function pwdblur(){
			console.log('密码输入完成')
		}
		function submit1(){
			var username = document.getElementById('user');
			var password = document.getElementById('pwd');
			if (username.value =='' || password.value == ''){
				alert('用户名和密码为空');
				return;
			}
			if (username.value == '') {
				alert('没有输入用户名');
				return;
			}
			if (password.value == ''){
				alert('没有输入密码');
				return;
			}
		}
		
		// 4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
		function addListener(){
			document.getElementById('d4').addEventListener('mouseenter',function(){console.log('添加监听器')})
		}
		function removeListener(){
			document.getElementById('d4').removeEventListener('mouseleave',function(){console.log('清除监听器')})
		}
	</script>
</html>
